<template>
    <h1>用户登录</h1>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field 
        v-model="form.userName"
        name="用户名"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{required: true, message: '请输入用户名'}]" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field 
        v-model="form.passWord"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        type="password"
        :rules="[{required: true, message: '请输入密码'}]" />
      </van-cell-group>
          <div class="btn">
        <van-button type="primary" round block native-type="submit">提交</van-button>
    </div>
    </van-form>

</template>
<script setup>
import { reactive,getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
// 获取当前vue实例
const { proxy } = getCurrentInstance()
// 路由跳转
const router=useRouter()
// 表单数据
const form = reactive({
    userName: '',
    passWord: ''
})

// 表单提交 实现异步的过程按照同步的方法写
const onSubmit=async ()=>{
  const { data }=await proxy.$api.login(form)
  if(data.code===10000){
    // 设置缓存
    localStorage.setItem('h5_token',data.data.token)
    // 缓存用户信息，引用数据类型需要类型转换
    localStorage.setItem('h5_userInfo',JSON.stringify(data.data.userInfo))
    router.push('/home')
  }
}

</script>
<style lang="less" scoped>
 h1{
    text-align: center;
 }
 .btn{
    margin: 16px;
 }
</style>
